{% extends 'main_hub/user_base.html' %}

{% block title %}
    历史观看
{% endblock %}

{% block content %}
    <br>
    <div class="container">
        {% if all_video_history.object_list %}
            {% for history in all_video_history.object_list %}
                <table class="table">
                    <tbody>
                    <tr>
                        <td>
                            <a href="{% url 'video_detail' history.video.id %}?video_sub_number=1">
                                <img class="card-img-top" src="{{ MEDIA_URL }}{{ history.video.image }}"
                                     style="width: 100px; height: 100px">
                            </a>
                        </td>
                        <td style="vertical-align:middle;line-height:20px;">
                            <a style="text-decoration:none;font-size: 15px;color: black"
                               href="{% url 'video_detail' history.video.id %}?video_sub_number=1">
                                {% if history.video.name|length > 8 %}
                                    {{ history.video.name|slice:"0:8" }}...
                                    {% else %}
                                    {{ history.video.name }}
                                {% endif %}
                                第{{ history.sub }}集
                                <br>
                                <br>
                                <br>
                            </a>
                        </td>

                        <td style="vertical-align:bottom;line-height:20px;">
                            <a href="{% url 'detail_user' %}?username={{ history.video.user.username }}"
                               style="text-decoration: none;color: grey;">
                                <img
                                        src="{{ MEDIA_URL }}{{ history.video.user.image }}"
                                        style="width: 25px; height: 25px;border-radius:50px">
                                {{ history.video.user }}
                            </a>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td style="vertical-align:middle;line-height:20px;">
                            <a onclick="delete_history({{ history.id }})" style="cursor:pointer"><img
                                    src="/static/img/trash.svg"></a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            {% endfor %}
            <div class="row justify-content-center">
                <div class="col-auto" style="margin-top: 50px">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination" style="right:500px">
                            {% if all_video_history.has_previous %}
                                <li class="page-item">
                                    <a href="?{{ all_video_history.previous_page_number.querystring }}"
                                       class="page-link" aria-label="Previous">
                                        上一页
                                    </a>
                                </li>
                            {% endif %}
                            {% for page in all_video_history.pages %}
                                {% if page %}
                                    {% ifequal page all_video_history.number %}
                                        <li class="page-item">
                                            <a class="page-link" href="?{{ page.querystring }}">{{ page }}</a>
                                        </li>
                                    {% else %}
                                        <li>
                                            <a class="page-link page" href="?{{ page.querystring }}">{{ page }}</a>
                                        </li>
                                    {% endifequal %}
                                {% else %}
                                    <li class="none">...</li>
                                {% endif %}
                            {% endfor %}
                            {% if all_video.has_next %}
                                <li class="page-item">
                                    <a href="?{{ all_video_history.next_page_number.querystring }}" class="page-link"
                                       aria-label="Next">下一页</a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
            </div>
        {% else %}
            <br>
            <h5 style="color: darkslategrey">您还没有观看过视频</h5>
        {% endif %}

    </div>

{% endblock %}

{% block custom_jss %}
    <script type="text/javascript">
        {#    点击删除历史记录 #}

        function delete_history(his_id) {
            $.ajax({
                cache: false,
                type: "POST",
                url: '{% url 'user_history_delete' %}',
                data: {'his_id': his_id},
                async: true,
                beforeSend: function (xhr, setting) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    if (data.status == 'fail') {
                        alert(data.msg)
                    } else if (data.status == 'success') {
                        alert(data.msg);
                        window.location.reload()
                    }
                }
            })
        }
    </script>
{% endblock %}